<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        body,html{height:100%;overflow:hidden;}
        body,h2,p{
            margin:0px;
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
        }
        body{font-size:16px;line-height:1.9em;color:#666;}
        p{text-indent:2em;padding:1% 2%;}
        .page{
            width:100%;
            height:100%;
            background-position:center;
            background-size:cover;
            background-attachment:fixed;
            position:absolute;/*作为容器*/
            top:0px;
        }
        .page-1{background-image:url("img/img0.jpg");}
        .page-2{background-image:url("img/img1.jpg")}
        .page-3{background-image:url("img/img2.jpg");}
        .page-4{background-image:url("img/img3.jpg");}
        .page-1,.page-2,.page-3,.page-4{position:absolute;}
        .upText{position:absolute;top:0;}
        .bottomText{position:absolute;bottom:0;}
        .white{color:#282e34;background:#f4f4f4;}
        .black{color:#f4f4f4;background:#282e34;}
        .theme{
            width:100%;
            color:#000;
            font-size:27px;
            text-align:center;
            text-transform:uppercase;/*字母大写*/
            letter-spacing:8px;/*字间距*/
            position:absolute;
            top:50%;
        }
        .theme .border{color:#fff;background-color:#111;padding:20px;}/*标题边框样式*/
        #nav{
            position:fixed;
            top:50%;
            right:2%;
            /*相对的空间内，垂直居中*/
            -webkit-transform:translateY(-50%);
            transform:translateY(-50%);
        }
        .layui-icon{font-size:20px;color:#fff;}
        .layui-icon-up:hover,.layui-icon-down:hover{color:#5FB878;}
        @media screen and (max-width:768px){
            p{font-size:14px;}
            .theme .border{color:#fff;background-color:#111;padding:14px;font-size:18px;}
        }
        @media screen and (min-height:768px) and (max-width:992px){
            p{font-size:16px;}
            .theme .border{color:#fff;background-color:#111;padding:18px;font-size:22px;}
        }
        @media screen and (min-width:992px) and (max-width:1200px){
            p{font-size:18px;}
        }
        @media screen and (min-width:1200px){
            p{font-size:20px;}
        }
    </style>
    <script type="text/javascript" src="layui/layui.js">
    </script>
</head>
<body>
<div class="page page-1" style="z-index:3;">
    <div class="theme">
        <span class="border layui-anim layui-anim-fadein">Introduce the car</span>
    </div>
</div>
<div class="page page-2" style="z-index:2;">
    <p class="upText black">对民众而言，使用无人驾驶汽车外出将更加方便、安全。<br/>
        无人驾驶汽车利用车载传感器来感知车辆，并根据感知所获得的道路、车辆位置、障碍物信息来控制车辆的转向、速度和间距，从而使车辆能够安全、可靠地在道路上行驶且在行驶的时候可以组成紧密的队形，一辆接一辆地鱼贯前进，这一趋势的变化，减少道路拥堵。无人驾驶汽车可根据实时路况及网络数据，计算出	最优外出路线,能更有效地把大家送达目的地。使道路交通有序、通畅。
    </p>
    <p class="bottomText white">据世界卫生组织统计，全球每年有124万人死于交通事故，这一数字在2030年可能达到220万人。仅在美国，每年大约有3.3万人死于交通意外。无人驾驶汽车可能大幅降低交通事故数量，为此可能挽救数百万人生命。Eno Centre for Transportation研究显示，如果美国公路上90%的汽车变成无人驾驶汽车，车祸数量将从600万起降至130万起，死亡人数从3.3万人降至1.13万人。在过去6年间，谷歌无人驾驶汽车已经行驶300多万公里，只遇到过16起交通意外，且从未引发过致命事件!无人驾驶可以提高行驶安全性，预防和减少交通事故的产生。通过无人驾驶汽车不仅能有效减少了因人车穿插混行、逆行、车辆随意调头等不文明行为引发的事故，还可避免应夜晚照明不好的路段所产生的车祸。人工智能取代人类进行驾驶的交通工具，可以跟人类驾驶员进行全方位互动，熟悉每一项操作指令，还能预测到很多潜在的危险，并进行紧急处理，保障了驾驶员、乘客和周边居民的安全。
    </p>
</div>
<div class="page page-3" style="z-index:1">
    <p class="upText white">无人驾驶也可以节省时间和精力。自18世纪80代汽车发明以来，停车空间建设也提上日程，随着汽车的稳步增长和普及，对停车场的需求也呈同样增长的格局。若是你也是生活在大城市的上班族，也许就深有体会，每天要跨区甚至跨市上班，还动不动就塞车，好几个小时全浪费在路上了且在此期间还要处于高度紧张的驾驶状况。</p>
    <p  class="bottomText black">将自动驾驶汽车与传统汽车进行对比，相比于传统汽车，自动驾驶汽车的保护更加实时，也去除很多容易遭遇攻击的媒介，自动驾驶汽车的安全优势更加明显。新一代的汽车技术不但将更加保障司机和乘客的安全，而且还会使汽车变得更智能、更“互联”。总而言之，无人驾驶汽车能把大家从重复乏味、而且充满风险的驾驶活动中解放出来，节约时间本钱和社会资源，让我们进行其他更有意义的活动！</p>
</div>
<div class="page page-4" style="z-index:0">
</div>
<div id="nav" style="z-index:4">
    <div class="layui-icon layui-icon-up"></div>
    <nav>
        <ul>
            <li class="li-1 layui-icon layui-icon-circle-dot"></li>
            <li class="li-2 layui-icon layui-icon-circle-dot"></li>
            <li class="li-3 layui-icon layui-icon-circle-dot"></li>
            <li class="li-4 layui-icon layui-icon-circle-dot"></li>
        </ul>
    </nav>
    <a><div class="layui-icon layui-icon-down"></div></a>
</div>

<script type="text/javascript">
    //调用jQuery
    layui.use(['jquery', 'layer'], function(){
        var $ = layui.$,layer = layui.layer;
        //使用jQuery
        $(document).ready(function(){
            var height=$(window).height();
            var pageNumber=$(".page").length;//页面总数
            var nowIndex=1;//当前页数:未防止多次滚动事件发生
            var index=1;//防止多次滚动事件发生/:每次滚动鼠标时都是滚动很大一个幅度,而不是一小格的慢慢滚动,这就导致了滚动的时候会多次触发onmousewheel事件
            var oldIndex=index;//未触发事件前的页数,用来分清图层动作
            var isSrolling=false;//若切屏进行，则不响应滚动
            /*getScrollData(event)实现：兼容浏览器，获得每次滚动距离*/
            function getScrollData(event){//不同浏览器每次滚动距离都不一样(FF每次滚动其data为3或者-3,其他为120或者-120)
                var e=event||window.event;//BOM
                var data= e.detail||e.wheelDelta;//滚动距离
                /*
                  e.detail为正值表向上滚。此时页面内容下降
                  e.wheelDelta为负值表向下滚。此时页面内容上升
                 */
                //alert(data);
            }
            //IE8之外的绑定事件方法(document.attachEvent为IE绑定事件方法，document.addEventListener在IE9实现)
            if(document.addEventListener && !document.attachEvent){
                document.addEventListener('mousewheel',getScrollData);   //非FireFox为文档滚动绑定滚动事件
                document.addEventListener('DOMMouseScroll',getScrollData); //FireFox为文档滚动绑定滚动事件
            }//IE8
            else
                document.attachEvent('onmousewheel',getScrollData);//IE为文档滚动绑定滚动事件
            function pageUp(){
                if(isSrolling)
                    return;
                if(index>1){
                    isSrolling=true;
                    index--;
                    green();
                    if(index<oldIndex){
                        $(".page-"+index).stop().animate({marginTop:0},1500,function(){
                            oldIndex=index;
                            isSrolling=false;
                        });
                        console.log(isSrolling);
                    }
                }
            }
            function pageDown(){
                if(isSrolling)
                    return;
                if(index<pageNumber){
                    isSrolling=true;
                    console.log("isSrolling1"+isSrolling)
                    index++;
                    green();
                    if(index>oldIndex){
                        $(".page-"+index).prevAll().stop().animate({marginTop:-height},1500,function(){
                            oldIndex=index;
                            isSrolling=false;
                        });
                    }
                    console.log(isSrolling);
                }
            }
            /*鼠标滚动执行匿名函数*/
            $(document).on("mousewheel DOMMouseScroll", function(event){
                if(event.originalEvent.wheelDelta>0){//event.wheelDelta正值向上滚
                    /*
                      jquery中，最终传入事件处理程序的event其实已经被jQuery做过标准化处理
                        其原有的事件对象则被保存于event对象的originalEvent属性之中,每个event都是jQuery.Event的实例
                        所以event.originalEvent.wheelDelta就是指向原始的事件对象，另一个同理。
                      */

                    pageUp();
                }
                else//event.delta负值向下滚
                    pageDown();
            });
            //切换按钮样式选择功能的实现
            function green(){
                $('#nav li').removeAttr("style");//用class会覆盖，此处用style，css优先级
                $('.li-'+index).attr("style","color:#5FB878;");
            }
            //切换按钮功能的实现(css实现或js实现)
            $(".layui-icon-up").click(function(){pageUp();});
            $(".layui-icon-down").click(function(){pageDown();});
            $('.li-'+index).attr("style","color:#5FB878;");
            for(var i=0;i<pageNumber;i++){
                $('#nav li').click(function(){
                    if(isSrolling)
                        return;
                    isSrolling=true;
                    index=$(this).index()+1;//$('#nav li')[i]下标,index当前页数
                    green();
                    if(index>oldIndex){
                        $(".page-"+index).prevAll().stop().animate({marginTop:-height},1000);
                        $(".page-"+index).stop().animate({marginTop:0},1000);
                        $(".page-"+index).nextAll().stop().animate({marginTop:0},1000);
                    }
                    /*
                        $(".page-"+index).prevAll().css("transition","transform 1.5s ease").css("transform","translateY(-100%)");
                        $(".page-"+index).css("transform", "translateY(0px)").css("transform", "translateY(0)").css("transform", "translateY(0px)");}
                     */
                    else if(oldIndex>index){
                        $(".page-"+index).stop().animate({marginTop:0},1000);
                        $(".page-"+index).nextAll().stop().animate({marginTop:0},1000);
                        /*
                            $(".page-"+index).css("transform", "translateY(0px)").nextAll().css("transform", "translateY(0)").css("transform", "translateY(0px)");
                         */
                    }
                    oldIndex=index;
                    isSrolling=false;
                })
            }
        })
    });
</script>
</body>
</html>